<template>
	<view class="page">
		<!-- ！！！！！！！！！高度根据数据量动态设置百分比或自适应 -->
		<!-- 自定义导航栏 -->
		<view>
			<u-navbar :autoBack="true" bgColor="#252928" safeAreaInsetTop placeholder="true">
				<view style="display: flex;" class="u-nav-slot" slot="left">
					<u-icon color="#ffffff" name="arrow-left" size="19"></u-icon>
					<view style="font-size: 36rpx;margin-left: 20rpx;">我的订单</view>

				</view>
			</u-navbar>
		</view>
		<subsection :list="list" :current="curNow" @change="sectionChange" mode="subsection" inactiveColor="#6b6d6c"
			fontSize="28rpx"></subsection>


		<view class="collection-c" v-show="curNow == 0">
			<view class="collection-item" v-for="(item,index ) in data" @click="sub_nav">
				<view class="collection-t">
					<view class="" style="display: flex;">
						<view style="margin-right: 20rpx;">
							<image :src="item.img" mode=""></image>
						</view>
						<view>
							<view class="" style="font-size: 32rpx;margin-bottom: 5rpx;">
								{{item.name}}
							</view>
							<view class="" style="color: #9f9f9f;margin-bottom: 10rpx;">
								{{item.bh}}
							</view>
							<view class="">
								{{item.price}}
							</view>
						</view>
					</view>
					<view style="color: #00ff00;">
						交易成功
					</view>
				</view>
			</view>
			<u-loadmore :status="status" height="100rpx" loadmoreText="-更多内容敬请期待-" />
		</view>


		<view class="content" v-if="curNow != 0">
			<view style="position: absolute;left: 0;bottom: 0;top: 0;right: 0;margin: auto;width: 100%;height: 300rpx;">
				<u-empty :width="100" textColor="#7e807f" mode="data" icon="https://img.xieling.top/mini4.png"
					text="暂无数字藏品" iconColor="#ffffff"
					style="position: absolute;left: 0;bottom: 0;top: 0;right: 0;margin: auto">
				</u-empty>
			</view>
		</view>
	</view>

</template>

<script>
	import subsection from '../../../components/subsection/subsection.vue'
	export default {

		data() {

			return {
				list: ['全部', '待评价', '已付款', '已取消'],
				curNow: 0,
				show: 0,
				data: [{
						name: '唐·十二辰·鼠首俑',
						bh: '西安博物馆',
						price: '19.99',
						time: '2020-01-28 12:00:38',
						odd: '22052525251850548',
						img: 'https://img.xieling.top/14.jpg'
					},
					{
						name: '唐·十二辰·鼠首俑',
						bh: '西安博物馆',
						price: '19.99',
						time: '2020-01-28 12:00:38',
						odd: '22052525251850548',
						img: 'https://img.xieling.top/14.jpg'
					},
					{
						name: '唐·十二辰·鼠首俑',
						bh: '西安博物馆',
						price: '19.99',
						time: '2020-01-28 12:00:38',
						odd: '22052525251850548',
						img: 'https://img.xieling.top/14.jpg'
					}
				]
			}
		},
		components: {
			subsection
		},
		methods: {
			sectionChange(index) {
				this.curNow = index;
			},
			sub_nav() {
				uni.navigateTo({
					url: '../mine-order-details/mine-order-details'
				})
			}
		}
	}
</script>

<style lang="scss">
	.content {
		background-color: #1d1d1d;
		border-radius: 40rpx 40rpx 0rpx 0rpx;
		height: 69%;
		position: relative;
	}


	.collection-c {
		width: 95%;
		margin: 0rpx auto 0rpx;
		box-sizing: border-box;
	}

	.collection-item {
		margin-top: 40rpx;
		background-color: #3c3f3d;
		padding: 20rpx;
		border-radius: 25rpx;

		image {
			width: 120rpx;
			height: 120rpx;
			border-radius: 25rpx;
		}

	}

	.collection-t {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 150rpx;
	}

	.pa {
		display: flex;
		justify-content: space-between;
	}
</style>
